<template>
  <div>
    <app-header></app-header>
    <app-nav-bar></app-nav-bar>
    <app-main></app-main>
  </div>
</template>

<script>
// 导入三个子组件,不需要写子文件，因为需要引入的是index.vue
// index.vue会默认被引入
import AppHeader from "./AppHeader";
import AppNavBar from "./AppNavBar";
import AppMain from "./AppMain";
export default {
  data() {
    return {};
  },

  components: {
    AppHeader,
    AppNavBar,
    AppMain
  },

  methods: {}
};
</script>

<style scoped>
.header {
  position: absolute;
  line-height: 68px;
  background-color: #17223b;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  box-sizing: border-box;
}
.navbar {
  position: absolute;
  top: 70px;
  left: 0;
  width: 210px;
  bottom: 0;
  background-color: #263859;
  overflow-y: auto;
  color: #fff
}
.main {
  position: absolute;
  padding: 10px;
  top: 70px;
  left: 210px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background-color: #faf5ef;
}
</style>